<template>
  <el-badge
    :value="count"
    class="item"
    :offset="[5, 15]"
    @click="handleClick"
    :show-zero="false"
  >
    处理事件
  </el-badge>
  <el-dialog
    v-model="dialogVisible"
    title="待处理事件"
    align="center"
    style="width: 800px"
  >
    <el-table :data="newEvent" style="width: 100%" height="200">
      <el-table-column prop="type" label="事件类型"></el-table-column>
      <el-table-column prop="time" label="发生时间"></el-table-column>
      <el-table-column prop="location" label="发生地点"></el-table-column>
      <el-table-column prop="level" label="严重程度"></el-table-column>
      <el-table-column label="操作" class="operation">
        <template #default="scope">
          <el-button @click="handlePass(scope.row)">通过</el-button>
          <el-button @click="handleReject(scope.row)">不通过</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import { ref, toRefs, getCurrentInstance, onMounted, computed } from "vue";
import { useEventStore } from "@/stores/event";
import { Point } from "@/zondyTools/mapgis-api/Point";
import { docLayer } from "@/zondyTools/zondy_map/index";

// 获取store
const { newEvent, newEventCount } = toRefs(useEventStore());
const { deleteNewEvent } = useEventStore();
// 初始化数据
const dialogVisible = ref(false);
// 计算数据变化
const count = computed(() => {
  return newEvent.value.length;
});

// 地图要素数据
let position = [];
let $map = null;
let source = null;
let attr = [];
const service = {
  name: "guanggu",
  layerId: 2,
};
// 初始化地图数据
onMounted(() => {
  const { proxy } = getCurrentInstance();
  $map = proxy.$map;
  source = new ol.source.Vector({});
  let pointLayer = new ol.layer.Vector({
    source,
  });
  $map.addLayer(pointLayer);
});
// 点击事件
const handleClick = () => {
  dialogVisible.value = true;
};
// 审核通过，先获取本行信息
const handlePass = (row) => {
  // 获取position
  position = row.position;
  attr = [
    { name: "事件编号", type: "string", value: row.id },
    { name: "事件类型", type: "string", value: row.type },
    {
      name: "事件等级",
      type: "number",
      value: Number(row.level),
    },
    { name: "发生时间", type: "string", value: row.time },
    { name: "发生地点", type: "string", value: row.location },
    { name: "车牌号", type: "string", value: row.carnumber },
    { name: "驾驶员", type: "string", value: row.name },
    {
      name: "处理状态",
      type: "number",
      value: Number(row.status),
    },
  ];
  // 调用Point中的add方法
  Point.add({ position, service, attr, docLayer });
  $map.getView().animate({
    center: position,
    zoom: 15,
    duration: 2000,
  });
  dialogVisible.value = false;
  //审核通过，找到row在newEvent中的索引，删除该行
  const index = newEvent.value.indexOf(row);
  deleteNewEvent(index);
};
// 审核不通过
const handleReject = (row) => {
  dialogVisible.value = false;
  //审核不通过，找到row在newEvent中的索引，删除该行
  const index = newEvent.value.indexOf(row);
  deleteNewEvent(index);
  //   刷新页面
  window.location.reload();
};
</script>

<style scoped>
.el-button {
  width: 50px;
}
</style>
